<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hiderow {
            display: none;
            /* 默认隐藏 */
        }

        td[data-btn="折叠"] {
            cursor: pointer;
            color: blue;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <table cellpadding="0" cellspacing="0" border="1">
        <tr>
            <td data-btn="折叠">展开</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr class="hiderow">
            <td>123</td>
            <td>232</td>
            <td>123</td>
        </tr>
        <tr class="hiderow">
            <td>222</td>
            <td>231</td>
            <td>24</td>
        </tr>
        <tr>
            <td data-btn="折叠">展开</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr class="hiderow">
            <td>123</td>
            <td>232</td>
            <td>123</td>
        </tr>
        <tr class="hiderow">
            <td>222</td>
            <td>231</td>
            <td>24</td>
        </tr>
    </table>
</body>

</html>
<script>
    // 获取所有含有 data-btn="折叠" 的单元格
    const foldButtons = document.querySelectorAll('td[data-btn="折叠"]');
    foldButtons.forEach(button => {
        button.addEventListener('click', () => {
            let currentRow = button.parentElement; // 获取当前行
            let nextRow = currentRow.nextElementSibling; // 获取下一行
            // 循环隐藏或显示所有相邻的 .hiderow 行，直到遇到下一个折叠行
            while (nextRow && nextRow.classList.contains('hiderow')) {
                if (nextRow.style.display === 'none') {
                    nextRow.style.display = 'table-row'; // 显示行
                    button.textContent = '折叠'
                } else {
                    nextRow.style.display = 'none'; // 隐藏行
                    button.textContent = '展开'
                }
                nextRow = nextRow.nextElementSibling; // 移动到下一行
            }
        });
    });
    // foldButtons.forEach(button => {
    //     button.addEventListener('click', () => {
    //         let currentRow = button.parentElement; // 获取当前行
    //         let nextRow = currentRow.nextElementSibling; // 获取下一行
    //         let isCollapsed = nextRow.style.display === 'none'; // 判断是否为折叠状态

    //         // 循环隐藏或显示所有相邻的 .hiderow 行，直到遇到下一个折叠行
    //         while (nextRow && nextRow.classList.contains('hiderow')) {
    //             nextRow.style.display = isCollapsed ? 'table-row' : 'none'; // 切换行的显示状态
    //             nextRow = nextRow.nextElementSibling; // 移动到下一行
    //         }

    //         // 切换按钮文本
    //         button.textContent = isCollapsed ? '折叠' : '展开';
    //     });
    // });
</script>